<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见CSS操作</title>
    <script type="text/javascript"src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                //获取坐标
                var $lastLi=$("ul li:last");
                var leftAndTop=$lastLi.offset();
                alert("left"+leftAndTop.left+",top:"+leftAndTop.top);
                //设置坐标
                $lastLi.offset(function (n,c) {
                    var newPos=new Object();
                    //将left 和top 各增加100
                    newPos.left=c.left+100;
                    newPos.top=c.top+100;
                    return newPos;
                })
            })
        })
    </script>
</head>
<body>
      <ul>
          <li>香蕉</li>
          <li>苹果</li>
          <li>橘子</li>
      </ul>
      <button>获取并设置“‘橘子’的坐标</button>
</body>
</html>